<template>
    <div class="card-page">
        <el-card shadow="always">
            <template #header> <span>修正数据库IP</span>  </template>
            <kv><template #k>
                <span class="k">
                    <div>mongo数据库 <el-switch v-model="info.mongo_enabled"></el-switch> </div>
                </span></template>
                <div class="flex" v-if="info.mongo_enabled">
                    <div>
                        <div> host:
                            <el-input v-model="info.mongo.host"/>
                        </div>
                        <div style="margin-left: 10px"> port:
                            <el-input v-model="info.mongo.port"/>
                        </div>
                    </div>
                    <div>
                        <div> user:
                            <el-input v-model="info.mongo.user"/>
                        </div>
                        <div style="margin-left: 10px"> password:
                            <el-input v-model="info.mongo.password"/>
                        </div>
                    </div>
                    <div style="width: 100%;flex-wrap: wrap;">
                        <el-tag>iam.tenantApplication.url</el-tag>
                    </div>
                </div>
            </kv>

            <kv><template #k>
                <span class="k">
                    <div>mysql数据库 <el-switch v-model="info.mysql_enabled"></el-switch> </div>
                </span></template>
                <div class="flex" v-if="info.mysql_enabled">
                    <div>
                        <div> host:
                            <el-input v-model="info.mysql.host"/>
                        </div>
                        <div style="margin-left: 10px"> port:
                            <el-input v-model="info.mysql.port"/>
                        </div>
                    </div>
                    <div>
                        <div> user:
                            <el-input v-model="info.mysql.user"/>
                        </div>
                        <div style="margin-left: 10px"> password:
                            <el-input v-model="info.mysql.password"/>
                        </div>
                    </div>
                    <div style="width: 100%;flex-wrap: wrap;">
                        <el-tag>nancal_enterprise_container.ec_application_info.address</el-tag>
                        <el-tag>nancal_enterprise_container.ec_application_info.logo</el-tag>
                        <el-tag>nancal_enterprise_container.ec_application_version.actual_address</el-tag>
                    </div>
                </div>
            </kv>

            <kv label="老系统应用ip">
                <el-input v-model="info.oldAppIp" chk="*"></el-input>
            </kv>
            <kv label="当前应用ip">
                <el-input v-model="info.appIp" chk="*"></el-input>
            </kv>

            <div style="text-align: center;margin: 10px">
                <el-button size="large" type="primary" @click="ok_click">替换ip</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2021-04-13 19:37:26
 */

import k8sRef from "../k8s/k8s-deployment-ref.vue"





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"info":{"oldAppIp":"","appIp":"","mongo":{"host":"","port":27017,"user":"root","password":""},"mysql":{"host":"","port":3306,"user":"root","password":""},"mongo_enabled":true,"mysql_enabled":true},"appDeploySetting":{}});
const info = $computed(()=> $data.info );

const $props = defineProps({
    action: { type: String } ,
    id : { type: String }
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

const action = $computed( function() {
    return $props.id ? "edit" : "add";
});
const action_name = $computed( function() {
    return {add: "添加", edit: "修改"}[$props.action]
});

const ok_click = function() {
    if (jv.chk_main() == false) {
        return;
    }
    if (!$data.info.mongo_enabled && !$data.info.mysql_enabled) {
        return jv.error("mysql,mongo 必选其一");
    }
    jv.$saveData("info",$data.info)
    var body = JSON.clone($data.info);
    if (!body.mongo_enabled) {
        delete body.mongo;
    }
    if (!body.mysql_enabled) {
        delete body.mysql;
    }
    delete body.mongo_enabled;
    delete body.mysql_enabled;
    jv.$http.post("/ops/ext/fix-nancal-db-ip", body).then(res => {
        jv.info("设置成功")
    });
};

onMounted( function() {
    jv.$loadData("info", v=> $data.info = v )
    jv.$http.post("/dev/app-deploy-setting/current").then(res => {
        $data.appDeploySetting = res.data.data;
        $data.info.appIp = $data.info.appIp;
        $data.info.mongo.host = $data.info.mongo.host || $data.info.appIp;
        $data.info.mysql.host = $data.info.mysql.host || $data.info.appIp;
    })
} )



</script>

<style scoped lang="scss">
.flex {
    background-color: #fffded;
    padding: 6px;
    border-radius: 8px;
    border: dashed 1px #8ad0f2;
    display: flex;
    flex-wrap: wrap;
}

.flex > div {
    margin: 3px;
}

.flex > div, .flex > div > div {
    display: inline-flex;
    align-items: center;
}
</style>
